import React from "react";
import {Button, Card, Form, message, Popconfirm, Spin, Table, Tooltip} from "antd";
import {PageHeaderWrapper} from "@ant-design/pro-layout";
import FilterForm from "@/components/BaseForm/FilterForm";
import witty from "@/utils/wittyUtils";
import {connect} from "dva";
import {NavLink} from 'dva/router';

let pagingData = {
    _pageSize: 10,
    _current: 1,
    _total: 0,
};

@connect(({inquiryModel}) => ({
    inquiryModel,
}))
class Inquiry extends React.Component {
    state = {
        //-- 页面数据
        dataSource: [],
        //-- 加载层
        loading: false,
        //-- [true]: 显示搜索条件, [false]: 隐藏搜索条件
        showMoreSearchForm: false,
        //-- 选中的RowKeys
        selectedRowKeys: [],
        //-- 选中的Rows
        selectedRows: [],
    }

    componentDidMount() {
        //-- 获取表格数据
        this.findPageData();
    }

    /**
     * 查询页面数据
     */
    findPageData = function (params = {}) {
        const thisCtx = this;
        const {dispatch} = this.props;

        if (params.createTime) {
            params.startDate = params.createTime[0].format('YYYY-MM-DD');
            params.endDate = params.createTime[1].format('YYYY-MM-DD');
            delete params.createTime;
        }

        params.currentPage = pagingData._current;
        params.pageSize = pagingData._pageSize;
        console.log(params);
        thisCtx.setState({loading: true});
        dispatch({
            type: 'inquiryModel/inquiryList',
            payload: params,
            callback: function (data) {
                thisCtx.setState({loading: false});
                if (data && data.success) {
                    const paging = data.datas.pagination;
                    pagingData._current = paging.current + 1;
                    pagingData._pageSize = paging.pageSize;
                    pagingData._total = paging.total;
                    thisCtx.setState({
                        //-- 重置选中的行
                        selectedRowKeys: [],
                        selectedRows: [],
                        dataSource: data.datas.list,
                    });
                } else {
                    message.error('电梯询价信息获取失败');
                }
            }
        });
    }

    handleFilter = (params) => {
        this.params = params;
        witty.validNilParams(params)
        if (witty.isValidObj(params)) {
            pagingData._current = 1;
            witty.validNilParams(params);
            this.findPageData(params);
        }
    }

    handlerDelInquiry = () => {
        const {selectedRowKeys, selectedRows} = this.state;
        if (selectedRowKeys.length == 1) {
            if (selectedRows[0].xstatus == 2) {
                message.error('已报价数据不能删除！');
                return;
            }
            const thisCtx = this;
            const {dispatch} = this.props;
            this.setState({loading: true});
            dispatch({
                type: 'inquiryModel/delInquiryInfo',
                payload: {id: selectedRowKeys[0]},
                callback: function (data) {
                    thisCtx.setState({loading: false});
                    if (data && data.success) {
                        message.success('删除数据成功');
                        thisCtx.findPageData();
                    } else {
                        message.error('删除数据失败');
                    }
                }
            });
        } else {
            message.info('请选择一行数据');
        }
    }

    formList = [
        {
            type: 'INPUT',
            label: '使用单位',
            field: 'iorgName'
        },
        {
            type: 'SELECT',
            label: '询价状态',
            field: 'xstatus',
            list: [{id: '0', name: '待提交'}, {id: '1', name: '待报价'}, {id: '2', name: '已报价'}, {id: '3', name: '已过期'}]
        },
        {
            type: 'RANGEPICKER',
            label: '提交时间',
            field: 'createTime',
        },
    ]

    render() {

        const {loading, selectedRowKeys, dataSource} = this.state;

        const buttonsStyle = {
            style: {
                marginRight: '15px',
            },
        };

        /**
         * 表格选中事件
         */
        const rowSelection = {
            selectedRowKeys: selectedRowKeys,
            onChange: (selectedRowKeys, selectedRows) => {
                this.setState({
                    selectedRowKeys: selectedRowKeys,
                    selectedRows: selectedRows,
                });
            },
        };

        return (
            <div>
                <Spin spinning={loading}>
                    <PageHeaderWrapper>
                        <Card style={{width: '100%', marginTop: '10px'}}>
                            <FilterForm formList={this.formList} filterSubmit={this.handleFilter}/>
                        </Card>

                        <Card style={{width: '100%', marginTop: '10px'}}>
                            <Tooltip title={selectedRowKeys.length > 0 && selectedRowKeys.length == 1 ? '' : '请选中一行数据'}>
                                <Popconfirm
                                    title="确定删除选中的数据吗？"
                                    onConfirm={() => this.handlerDelInquiry()}
                                    okText="删除"
                                    cancelText="取消"
                                    disabled={!(selectedRowKeys.length > 0 && selectedRowKeys.length == 1)}
                                >
                                    <Button type="danger" icon="delete" {...buttonsStyle}>
                                        删除
                                    </Button>
                                </Popconfirm>
                            </Tooltip>
                        </Card>

                        <Card style={{width: '100%', marginTop: '10px', overflow: "auto"}}>
                            <Table
                                bordered
                                rowKey={data => `${data.id}`}
                                rowSelection={rowSelection}
                                columns={this.columns}
                                dataSource={dataSource}
                                pagination={{
                                    pageSize: pagingData._pageSize,
                                    current: pagingData._current,
                                    total: pagingData._total,
                                    onChange: (page) => {
                                        pagingData._current = page;

                                        this.findPageData();
                                    },
                                    showTotal: total => `共 ${total} 条数据`,
                                    style: {
                                        float: "left"
                                    }
                                }}
                            />
                        </Card>
                    </PageHeaderWrapper>
                </Spin>
            </div>
        );
    }

    /**
     * 表格列
     */
    columns = [
        {
            title: '报价ID',
            align: 'center',
            dataIndex: 'id',
            key: 'id',
        },
        {
            title: '投保单位',
            align: 'center',
            dataIndex: 'iorgName',
            key: 'iorgName',
        },
        {
            title: '提交时间',
            align: 'center',
            dataIndex: 'createTime',
            key: 'createTime',
        },
        {
            title: '电梯数量',
            align: 'center',
            dataIndex: 'icount',
            key: 'icount',
        },
        {
            title: '询价状态',
            align: 'center',
            dataIndex: 'xstatus',
            key: 'xstatus',
            render: (text) => {
                const xStatusData = {
                    0: '待提交',
                    1: '待报价',
                    2: '已报价',
                    3: '已过期'
                }
                return xStatusData[text];
            }
        },
        {
            title: '操作',
            align: 'center',
            key: 'detail',
            render: (text, record) => {
                return <NavLink to={{
                    pathname: '/manage/inquiry/detail',
                    state: {
                        id: record.id,
                        showDetail: true
                    },
                }}>查看详情</NavLink>;
            },
        },
    ]
}

export default Form.create()(Inquiry);
